<template>
  <div>
    <div>
      <el-card class="box-card">
        <div class="scenic-spot-info">
          <el-select style="width: 150px" clearable v-model="selectVal" slot="prepend" placeholder="请选择" @change="changeSearch">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
          <el-input style="width: 400px; margin-right: 10px" placeholder="请输入内容" v-model="search" class="input-with-select">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
          <el-button icon="el-icon-circle-plus-outline" size="medium" @click="addScenic" type="primary" style="margin-bottom: 10px; position: absolute; right: 0">添加景点</el-button>
        </div>
        <div class="tabel" ref="tabel">
          <el-table :data="tableData" ref="singleTable" style="width: 100%" border :max-height="tableData != null || tableData.length > 0 ? 350 : maxHeight" :height="tableData != null || tableData.length > 0 ? 150 : maxHeight">
            <el-table-column fixed align="center" prop="id" label="ID"> </el-table-column>
            <el-table-column fixed align="center" prop="name" label="景点名称" min-width="140"> </el-table-column>
            <el-table-column align="center" prop="english_name" label="景点英文名" min-width="100"> </el-table-column>
            <el-table-column align="center" prop="city_name" label="城市"> </el-table-column>
            <el-table-column align="center" prop="level" label="等级"> </el-table-column>
            <el-table-column align="center" prop="title" label="标题" min-width="140"> </el-table-column>
            <el-table-column align="center" prop="play_time" label="游玩时间" min-width="130"> </el-table-column>
            <el-table-column align="center" prop="cost" label="预计费用"> </el-table-column>
            <el-table-column align="center" prop="am_allow_people" label="上午允许最大人数" min-width="180"> </el-table-column>
            <el-table-column align="center" prop="pm_allow_people" label="下午允许最大人数" min-width="180"> </el-table-column>
            <el-table-column align="center" label="操作" width="80px" fixed="right">
              <template slot-scope="scope">
                <el-button type="danger" icon="el-icon-delete" @click="del(scope)" circle></el-button>
                <el-button type="primary" icon="el-icon-delete" @click="edit(scope)" circle></el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination"><el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagenow" :page-sizes="[100, 200, 300, 400]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="400"> </el-pagination></div>
        </div>
      </el-card>
    </div>
    <!-- 添加-编辑 对话框 -->
    <add-edit :flag="flag" ref="addEdit"></add-edit>
  </div>
</template>

<script>
import { scenicList } from '@/api/scenicApi.js'
export default {
  data() {
    return {
      flag: '',
      maxHeight: 0,
      search: '',
      selectVal: '',
      city_name: '',
      name: '',
      level: '',
      pagenow: 1,
      pagesize: 10,
      tableData: [],
      options: [
        { label: '景点名称', value: 1 },
        { label: '所属城市', value: 2 },
        { label: '景点等级', value: 3 },
      ],
    }
  },
  components: {
    addEdit: () => import('./add_edit.vue'),
  },
  created() {
    this.getData()
  },
  mounted() {
    // this.load();  //加载
    this.$nextTick(() => {
      this.maxHeight = this.$refs.tabel.clientHeight - 100
    })
    console.log(this.maxHeight, '55555')
  },
  methods: {
    addScenic() {
      this.flag = 'add'
      this.$refs.addEdit.open({})
    },
    edit(row) {
      this.flag = 'edit'
      this.$refs.addEdit.open(row)
    },
    changeSearch(e) {
      switch (e) {
        case 1:
          this.name = this.search
          break
        case 2:
          this.city_name = this.search
          break
        case 3:
          this.level = this.search
          break
      }
    },
    // 根据分页获取对应的商品列表
    async getGoodsList() {
      const { data: res } = await this.$http.get('goods', {
        params: this.ruleForm,
      })
      if (res.meta.status !== 200) {
        return this.$message.error('获取列表失败')
      }
      this.goodslist = res.data.goods
      this.total = res.data.total
    },

    getData() {
      //   this.$http.get('manager/scenicSpot/queryScenicSpot', { params: { name: this.name, city_name: this.city_name, level: this.level } }).then((res) => {
      //     this.tableData = res.data.data
      //   })
      scenicList({ name: this.name, city_name: this.city_name, level: this.level }).then((res) => {
        this.tableData = res.data.data
      })
      this.$nextTick(() => {
        this.$refs.singleTable.doLayout() // 解决表格错位
      })
    },

    // 删除
    del(row) {
      console.log(row)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {})
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    handleSizeChange(e) {},
    handleCurrentChange(e) {},
    //查询景点
    handleSearch() {
      this.getData()
    },
  },
}
</script>

<style scoped>
.tabel {
  width: 100%;
  height: 32rem;
  margin: auto;
}
.title {
  font-size: 18px;
  font-weight: 520;
  color: #999;
}

.pagination {
  margin-top: 10px;
  height: 50px;
  text-align: right;
}
.scenic-spot-info {
  position: relative;
  height: 70px;
}
</style>
